<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.qq {
    height: 545px;
    width: 477px;
    position: absolute;
    left: 10%;
    top: 10%;
}
div { position:absolute;}
.qq_head { width:345px; height:367px; background-color:#19161a; border-radius:50%; position:absolute; left:72px; top:0px;}

.qq_headMask { width:344px; height:188px; background-color:#19161a; z-index:5; border-radius:50%; position:absolute; left:73px; top:102px;
}
.qq_body { width:370px; height:340px;  background-color:#19161a; border-radius:50%; left:50px; top:166px; z-index:2; box-shadow:0px 3px 5px rgba(0,0,0,.3);  }
.qq_body_w { width:315px; height:282px; background-color:#fefefe; border-radius:50%; left:77px; top:215px; z-index:2;}
.qq_leftChi { width:55px; height:210px; background-color:#1a1624; border-radius:50%; -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg);  -ms-transform:rotate(20deg);top:220px; left:25px;}
.qq_rightChi { width:55px; height:210px; background-color:#1a1624; border-radius:50%; -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); -ms-transform:rotate(-20deg); top:220px; right:25px;}
.qq_leftFooter { width:165px; height:75px; background-color:#f07203; left:54px ; top:442px; border-radius:50%; border:3px #872e0c  solid;box-shadow:3px 3px 25px #666,3px 3px 5px #333,3px 3px 20px #333; }
.qq_leftFooter_l { width:60px; height:22px;border-radius:50%; -webkit-transform:rotate(-20deg); transform:rotate(-20deg);background-color:#ee7105;border-top:1px #872e0c  solid; border-left:solid 3px #872e0c  ;}

.qq_rightFooter { width:165px; height:75px; background-color:#f07203; right:54px ; top:442px; border-radius:50%; border:3px #872e0c  solid; box-shadow:3px 3px 25px #666,3px 3px 5px #333,3px 3px 20px #333;}
.qq_rightFooter_l { width:60px; height:22px;border-radius:50%; -webkit-transform:rotate(20deg); transform:rotate(20deg);background-color:#ee7105;border-top:1px #872e0c  solid; border-right:solid 3px #872e0c  ; right:0px; }
.qq_head_eayLeft { width:65px; height:100px; background-color:#f3f6fb; border-radius:50%; left:160px; top:75px; z-index:6 }
.qq_head_eayRight { width:65px; height:100px; background-color:#f3f6fb; border-radius:50%; left:250px; top:75px; z-index:6 }
.qq_head_eayLeft_cri { width:30px; height:41px; background-color:#201e1f;border-radius:50%; left:28px; top:35px; }
.qq_head_eayLeft_cri_s { width:11px; height:15px;border-radius:50%; background-color:#ececec; left:12px; top:14px;}

.qq_head_eayRight_cri {width:14px; height:35px; border:solid 8px #201e1f;  border-radius:50%; left:10px; top:35px; border-bottom-color:rgba(255,255,255,0); clip:rect(0px 30px 27px 0px); }

.qq_headMask_mouth { width:230px; height:70px; border-radius:50%; background-color:#fc9202; left:57px; top:95px; }
.qq_headMask_mouthLine { width:170px ; height:96px; border-bottom:solid 8px #201e1f; border-radius:50%; top:-25px; left:30px; clip:rect(70px 170px 100px 0px)}

.qq_body_wei { width:372px; height:197px; border-radius:50%; background-color:#fd2100; left:55px; top:153px; z-index:4; border-top-color:rgba(255,255,255,.0); box-shadow:0px 5px 10px rgba(0,0,0,.4),0px 0px 30px rgba(0,0,0,.3) inset; 
background:-webkit-gradient(radial,50% 50% ,10, 50% 50% ,100, from(#ff7373), to(#df0500)) }

.qq_body_wei_down { width:70px; height:115px; background-color:#fd2100; border-bottom-right-radius:20px;border-bottom-left-radius:40px; left:109px; top:310px; z-index:3; box-shadow:0px 5px 10px rgba(0,0,0,.4),5px 5px 30px rgba(0,0,0,.3) inset; border-top-left-radius:40px; -webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);-moz-transform:rotate(5deg);}
</style>
</head>

<body>
<div class="qq">
<div class="qq_head_eayLeft">
  <div class="qq_head_eayLeft_cri">
    <div class="qq_head_eayLeft_cri_s"></div>
  </div>
</div>
<div class="qq_head_eayRight">
    <div class="qq_head_eayRight_cri"></div>
</div>
  <div class="qq_head">

  </div>
  <div class="qq_headMask">
    <div class="qq_headMask_mouth">
      <div class="qq_headMask_mouthLine"></div>
    </div>

  </div>
  <div class="qq_body"></div>
  <div class="qq_body_wei"></div>
  <div class="qq_body_wei_down"></div>
<div class="qq_body_w"></div>
  <div class="qq_leftChi"></div>
  <div class="qq_rightChi"></div>
  <div class="qq_leftFooter"> 
    <div class="qq_leftFooter_l"></div>
  </div>
  <div class="qq_rightFooter"> 
    <div class="qq_rightFooter_l"></div>
  </div>
</div>
</body>
</html>